<template>
	<view class="forgot-password">
		<view class="top-bg"></view>
		<view class="pl-3 pr-3 forgot-password-wrap">
			<view class="pt-1 pb-2 pl-3 pr-3 forgot-password-panel">
				<u--form class="mb-3 forgot-password-form" labelWidth="100" labelPosition="top" :borderBottom="false" 
				:model="fpForm" :rules="fpRules" ref="fpFormRef">
					<u-form-item label="手机号码" prop="Tel" :borderBottom="false">
						<u--input v-model="fpForm.Tel" placeholder="请输入手机号码" border="none"
							:customStyle="inputStyle" clearable></u--input>
					</u-form-item>
					<u-form-item label="验证码" prop="VerifyCode" :borderBottom="false">
						<u--input v-model="fpForm.VerifyCode" placeholder="请输入验证码" border="none"
							:customStyle="inputStyle" clearable>
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒后重新获取"></u-code>
								<u-button class color="#007aff" @tap="getCode" :text="tips" type="success" size="mini"></u-button>
							</template>
						</u--input>
					</u-form-item>
					<u-form-item label="新密码" prop="NewPwd" :borderBottom="false">
						<u--input password v-model="fpForm.NewPwd" placeholder="请输入6-20位的密码" border="none"
							:customStyle="inputStyle" clearable>
						</u--input>
					</u-form-item>
					<u-form-item label="确认新密码" prop="Pwd1" :borderBottom="false">
						<u--input password v-model="fpForm.Pwd1" placeholder="请确认密码" border="none"
							:customStyle="inputStyle" clearable>
						</u--input>
					</u-form-item>
				</u--form>
				<u-button @click="handleResetPassword" color="#007aff" text="重置密码" size="" shape="circle"></u-button>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		resetPasswordByMobile
	} from "@/apis/user.js";
	import {
		sendVerifyCode
	} from "@/apis/common.js";
	export default {
		data() {
			return {
				inputStyle: {
					background: '#f1f1f1',
					padding: '6px 8px'
				},
				fpForm: {
					Tel: '',
					NewPwd: '',
					Pwd1:'',
					SmsId: '',
					VerifyCode: '',
				},
				fpRules: {
					Tel: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					NewPwd: {
						min: 6,
						max: 20,
						required: true,
						message: '请输入6-20位的密码',
						trigger: ['blur', 'change']
					},
					Pwd1: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value == this.registerForm.Pwd;
							},
							message: '两次输入密码不一致',
							trigger: ['change', 'blur'],
						}
					],
					VerifyCode: {
						min: 4,
						required: true,
						message: '请输入正确的验证码',
						trigger: ['change', 'blur'],
					},
				
				},
				tips:''
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			async handleResetPassword() {
				if (!await this.$refs.fpFormRef.validate()) return;
			
				const fpData = this.fpForm
				const res = await resetPasswordByMobile(fpData)
				console.log('?', res)
				if (res.MsgCode == 0) {
					uni.showToast({
						title: '修改成功！',
						duration: 2000,
						icon: 'success'
					});
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/login/login'
						})
					},2000)
				} else {
					return uni.showToast({
						title: res.ErrMsg,
						duration: 3000,
						icon: 'none'
					});
				}
			},
			
			async getCode() {
				if (!this.fpForm.Tel || this.fpForm.Tel.length != 11) {
					return uni.showToast({
						title: '请输入正确的手机号',
						duration: 1000,
						icon: 'none'
					});
				} else if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await sendVerifyCode({
						OrderCmpyCode: '',
						Tel: this.fpForm.Tel
					})
			
					if (res.MsgCode == 0 && res.data.SmsId) {
						this.fpForm.SmsId = res.data.SmsId
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
						console.log('this.fpForm', this.fpForm)
					}
			
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style lang="scss">
	.forgot-password {
		.top-bg {
			width: 100%;
			height: 150rpx;
			background-color: #007aff;
			z-index: -1;
		}

		.forgot-password-wrap {
			margin-top: -72rpx;

			.forgot-password-panel {
				background-color: #fff;
				border-radius: $s-border-radius;
				box-shadow: $s-bg-shadow;
			}
		}
	}
</style>
